<template>
    <!-- block6 -->
    <div class="block6 max-width">
        <div class="flex justify-between items-center w-full">
            <div class="text-[42px] font-bold">案例研究</div>
            <div class="block6-button">
                <div class="text-[14px]">前往案例研究</div>
                <div class="i-carbon:arrow-right"></div>
            </div>
        </div>
        <div class="flex flex-col items-center gap-[30px] w-full">
            <div class="block6-box1 position-relative">
                <div class="flex flex-col justify-center gap-[10px]">
                    <div class="text-[11px] p-[10.5px] bg-[#9945FF] rounded-[20px] w-[68px]">CASE STUDY</div>
                    <div class="text-[40px] font-bold">XP</div>
                </div>
                <div class="text-[17px]">Helium 在Solana 上带来真正的5G网络</div>
                <div class="block6-box1-button">
                    <div class="i-carbon:arrow-right w-[16px] h-[32px]"></div>
                </div>
                <div class="box rounded-[20px] position-absolute top-0 left-0 w-full h-full"></div>
            </div>
            <div class="flex justify-center items-center gap-[30px] w-full box-border">
                <div class="block6-box2-group block6-box2-bg1 flex flex-col justify-end gap-30px position-relative">
                    <div class="p-[0_30px] flex flex-col gap-20px">
                        <div class="text-[11px] p-[10.5px] bg-[#9945FF] rounded-[20px] w-[68px]">CASE STUDY</div>
                        <div class="text-[28px] font-bold">Boba Guys</div>
                    </div>
                    <div class="p-[0_20px_50px_30px] text-[19px]">ASICS 与 Solana Pay 合作建立忠诚度计划</div>
                    <div class="block6-box2-button bottom-120px">
                        <div class="i-carbon:arrow-right w-17px h-34px"></div>
                    </div>
                    <div class="box rounded-[20px] position-absolute top-0 left-0 w-full h-full" />
                </div>
                <div class="block6-box2-group block6-box2-bg2 flex flex-col justify-end gap-30px position-relative">
                    <div class="p-[0_30px] flex flex-col gap-20px">
                        <div class="text-[11px] p-[10.5px] bg-[#9945FF] rounded-[20px] w-[68px]">CASE STUDY</div>
                        <div class="text-[28px] font-bold">Homebase</div>
                    </div>
                    <div class="p-[0_20px_30px_30px] text-[19px]">GainForest 为气候保护工作带来透明度</div>
                    <div class="block6-box2-button bottom-100px">
                        <div class="i-carbon:arrow-right w-17px h-34px"></div>
                    </div>
                    <div class="box rounded-[20px] position-absolute top-0 left-0 w-full h-full" />
                </div>
                <div class="block6-box2-group block6-box2-bg3 flex flex-col justify-end gap-30px position-relative">
                    <div class="p-[0_30px] flex flex-col gap-20px">
                        <div class="text-[11px] p-[10.5px] bg-[#9945FF] rounded-[20px] w-[35px]">VIDEO</div>
                        <div class="text-[28px] font-bold">Hivemapper</div>
                    </div>
                    <div class="p-[0_20px_30px_30px] text-[19px]">
                        Hivemapper 利用更好的实时数据和社区激励机制实现地图绘制的去中心化
                    </div>
                    <div class="block6-box2-button bottom-120px">
                        <div class="i-carbon:arrow-right w-17px h-34px"></div>
                    </div>
                    <div class="box rounded-[20px] position-absolute top-0 left-0 w-full h-full" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.block6 {
    --at-apply: h-[900px] flex flex-col items-center mt-[50px] gap-[40px];
}
.block6-button {
    --at-apply: flex items-center gap-[13px] border-(solid 1px #fff)
    p-[8px_15px] rounded-[25px] cursor-pointer hover:(text-[#000] bg-[#fff]);
}
.box {
    background-image: linear-gradient(1turn, #121212, transparent);
}

.block6-box1 {
    --at-apply: flex flex-col justify-center gap-[30px] bg-[url("/block6/bg.png")]
    bg-cover h-[300px] rounded-[15px] p-[35px_30px] cursor-pointer w-full box-border;
}
.block6-box1:hover div:last-child{
    background-image: unset;
}

.block6-box1-button {
    --at-apply: border-(solid 1px #fff) cursor-pointer rounded-[16px]
    hover:(text-[#000] bg-[#fff]) w-[32px] h-[32px] flex justify-center items-center mt-5px z-9999;
}

.block6-box2-group {
    --at-apply: basis-1/3 h-[300px] bg-[#9945FF] rounded-[20px] cursor-pointer;
}
.block6-box2-group:hover div:last-child{
    background-image: unset;
}

.block6-box2-button {
    --at-apply: w-34px h-34px border-#fff border-solid border-[1px] rounded-[17px]
    flex items-center justify-center position-absolute right-20px hover:(bg-[#fff] text-#000)
    z-999;
}
.block6-box2-bg1{
    background-image: url("/block6/bg2.png");
    background-repeat: no-repeat;
    background-position: -80px 0;
    background-size: 140%;
}
.block6-box2-bg2{
    background-image: url("/block6/bg3.png");
    background-repeat: no-repeat;
    background-position: -80px 0;
    background-size: 142%;
}
.block6-box2-bg3{
    background-image: url("/block6/bg4.png");
    background-repeat: no-repeat;
    background-position: -85px 0;
    background-size: 142%;
}
</style>
